<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header('书籍分类')"></head>
<body>
<section class="content">
    <form id="form" class="form-horizontal" th:object="${commodity}">
        <input type="hidden" name="id" th:value="*{id}">
        <div class="box-body">
            <div class="form-group">
                <label for="cid" class="col-sm-2 control-label">分类名称</label>
                <div class="col-sm-10">
                    <select id="cid" name="cid" class="form-control select2" data-placeholder="分类名称"
                            th:with="list=${@shopCategorysService.findSelect2()}" th:field="*{cid}">
                        <option th:each="category: ${list}" th:value="${category.id}"
                                th:text="${category.name}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">书名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="书名称" th:value="*{name}"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="author" class="col-sm-2 control-label">作者</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="author" name="author" placeholder="作者"
                           th:value="*{author}"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="descs" class="col-sm-2 control-label">描述</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="descs" name="descs" placeholder="描述"
                           th:value="*{descs}" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="pictures" class="col-sm-2 control-label">封面图片</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control" id="pictures" name="file" placeholder="封面图片">
                    <img th:if="*{pictures!=null}" th:src="*{pictures}" style="width: 100px;height: 100px">
                </div>
            </div>
            <div class="form-group">
                <label for="price" class="col-sm-2 control-label">价格</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="price" name="price" placeholder="价格"
                           th:value="*{price}" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="stock" class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="stock" name="stock" placeholder="库存"
                           th:value="*{stock}" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="details" class="col-sm-2 control-label">书详情</label>
                <div class="col-sm-10">
                    <textarea id="details" rowspan="10"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="status" class="col-sm-2 control-label">状态</label>
                <div class="col-sm-10">
                    <select id="status" name="status" class="form-control select2" th:field="*{status}">
                        <option value="0">展示</option>
                        <option value="1">隐藏</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="hs" class="col-sm-2 control-label">首页展示</label>
                <div class="col-sm-10">
                    <select id="hs" name="hs" class="form-control select2" th:field="*{hs}">
                        <option value="0">展示</option>
                        <option value="1">不展示</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="remarks" class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="remarks" name="remarks" placeholder="备注"
                           autocomplete="off" th:value="*{remarks}">
                </div>
            </div>
        </div>
        <div class="box-footer" style="display: none">
            <button id="btn" type="button" class="btn btn-info pull-right" onclick="save()"></button>
        </div>
    </form>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:src="@{/demo/resources/adminlte/bower_components/ckeditor/ckeditor.js}"></script>
<script th:inline="javascript">

    $(function () {

        var content = [[${commodity.content}]]

        CKEDITOR.replace('details',
            {
                filebrowserImageUploadUrl: '/profile/ckUpload',
                toolbar:
                    [
                        //加粗     斜体，     下划线      穿过线      下标字        上标字
                        ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
                        // 数字列表          实体列表            减小缩进    增大缩进
                        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
                        //左对 齐             居中对齐          右对齐          两端对齐
                        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                        //超链接  取消超链接 锚点
                        ['Link', 'Unlink', 'Anchor'],
                        //图片    flash    表格       水平线            表情       特殊字符        分页符
                        ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
                        '/',
                        // 样式       格式      字体    字体大小
                        ['Styles', 'Format', 'Font', 'FontSize'],
                        //文本颜色     背景颜色
                        ['TextColor', 'BGColor'],
                        //全屏           显示区块
                        ['Maximize', 'ShowBlocks', '-']
                    ]
            }
        );
        if (content != null && content != undefined) {
            CKEDITOR.instances.details.setData(content);
        }
    })


    /**
     * 保存数据
     */
    function save() {
        var formData = new FormData($("#form")[0]);
        var details = CKEDITOR.instances.details.getData();
        formData.append("content", details)
        form('/shop/commodity/save', formData, function (res) {
            window.parent.loaded(res.msg, res.code)
        }, function (error) {
            window.parent.loaded(error)
        })

    }

</script>
</body>